﻿<%@ Page Language="C#" AutoEventWireup="false" CodeFile="sUserform.aspx.cs" Inherits="SIPO.Web.Forms.UserManagement.sUserform" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>User Form</title>

   
    <script src="<%= ResolveUrl("~/scripts/jquery.inputmask.bundle.min.js") %>" type="text/javascript"></script>

    <script src="<%= ResolveUrl("~/scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.wrapper.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.sha1.js") %>" type="text/javascript"></script>
    <style type="text/css">
        .ui-autocomplete
        {
            max-height: 100px;
            overflow-y: auto; /* prevent horizontal scrollbar */
            overflow-x: hidden; /* add padding to account for vertical scrollbar */
            padding-right: 20px;
        }
        .custom-combobox
        {
            position: relative;
            display: inline-block;
        }
        .custom-combobox-toggle
        {
            position: absolute;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            padding: 0; /* support: IE7 */
            height: 1.7em;
            top: 0.1em;
        }
        .custom-combobox-input
        {
            margin: 0;
            padding: 0.3em;
        }
        .style1
        {
            width: 152px;
        }
    </style>
    <script type="text/javascript">
        (function ($) {
            $.widget("custom.combobox", {
                _create: function () {
                    this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element);
                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },
                _createAutocomplete: function () {
                    var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
                    this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
    delay: 0,
    minLength: 0,
    source: $.proxy(this, "_source")
})
.tooltip({
    tooltipClass: "ui-state-highlight"
});
                    this._on(this.input, {
                        autocompleteselect: function (event, ui) {
                            ui.item.option.selected = true;
                            this._trigger("select", event, {
                                item: ui.item.option
                            });
                        },
                        autocompletechange: "_removeIfInvalid"
                    });
                },
                _createShowAllButton: function () {
                    var input = this.input,
wasOpen = false;
                    $("<a>")
.attr("tabIndex", -1)
.attr("title", "Menampilkan semua data")
.tooltip()
.appendTo(this.wrapper)
.button({
    icons: {
        primary: "ui-icon-triangle-1-s"
    },
    text: false
})
.removeClass("ui-corner-all")
.addClass("custom-combobox-toggle ui-corner-right")
.mousedown(function () {
    wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function () {
    input.focus();
    // Close if already visible
    if (wasOpen) {
        return;
    }
    // Pass empty string as value to search for, displaying all results
    input.autocomplete("search", "");
});
                },
                _source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(this.element.children("option").map(function () {
                        var text = $(this).text();
                        if (this.value && (!request.term || matcher.test(text)))
                            return {
                                label: text,
                                value: text,
                                option: this
                            };
                    }));
                },
                _removeIfInvalid: function (event, ui) {
                    // Selected an item, nothing to do
                    if (ui.item) {
                        return;
                    }
                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
                    this.element.children("option").each(function () {
                        if ($(this).text().toLowerCase() === valueLowerCase) {
                            this.selected = valid = true;
                            return false;
                        }
                    });
                    // Found a match, nothing to do
                    if (valid) {
                        return;
                    }
                    // Remove invalid value
                    this.input
.val("")
.attr("title", "\"" + value + "\"" + " tidak ditemukan")
.tooltip("open");
                    this.element.val("");
                    this._delay(function () {
                        this.input.tooltip("close").attr("title", "");
                    }, 2500);
                    this.input.data("ui-autocomplete").term = "";
                },
                _destroy: function () {
                    this.wrapper.remove();
                    this.element.show();
                }
            });
        })(jQuery);
        $(function () {
            $("#ddlDebtor").combobox();
            $("#toggle").click(function () {
                $("#ddlDebtor").toggle();
            });
        });
    </script>
    <script type="text/javascript">

        $("#btnSave").button({ icons: { primary: "ui-icon-disk"} });
        $("#btnClose").button({ icons: { primary: "ui-icon-close"} });
 
    </script>
    <script type="text/javascript">

        $(document).ready(function () {
            Emailuser = $('#txtEmail').val();
            // 1. prepare the validation rules and messages.
            var rules = {
                txtUserName: {
                    required: true,
                    maxlength: 100
                },

                txtUserCode: {
                    required: true,
                    maxlength: 20
                },

                txtMobile: {
                    maxlength: 15
                },

                txtEmail: {
                    required: true,
                    email: true,
                    maxlength: 50
                },

                txtPassword: {
                    required: true,
                    maxlength: 50
                },
                txtConfirmPassword: {
                    required: true,
                    maxlength: 50
                }

            };
            var messages = {
                txtUserName: {
                    required: "Nama user wajib di isi!",
                    maxlength: "Panjang maksimal nama user adalah 100 digit"
                },

                txtUserCode: {
                    required: "Kode user wajib di isi!",
                    maxlength: "Panjang maksimal kode user adalah 20 digit"
                },

                txtMobile: {
                    maxlength: "Panjang maksimal nomor handphone adalah 15 digit"
                },

                txtEmail: {
                    required: "Email wajib di isi",
                    email: "Format alamat email harus berformat xxx@domain.xxx",
                    maxlength: "Panjang maksimal email adalah 50 digit"
                },

                txtPassword: {
                    required: "Password wajib di isi!",
                    maxlength: "Panjang maksimal password adalah 50 digit!"
                },
                txtConfirmPassword: {
                    required: "Konfirmasi password wajib di isi!",
                    maxlength: "Panjang maksimal konfirmasi password adalah 50 digit!"
                }
            };

            //-------------- validasi -----------------
            //txtUsername tidak boleh angka dan karakter lainnya
            $("#txtUserName").inputmask("Regex", { regex: "[A-Za-z-.,0-9 ]*" });

            //txtUserCode tidak boleh karakter khusus
            $("#txtUserCode").inputmask("Regex", { regex: "[A-Za-z0-9._-]*" });

            //txtMobile tidak boleh huruf dan karakter khusus
            $("#txtMobile").inputmask("Regex", { regex: "[0-9]*" });
            var id = $('#<%= hfID.ClientID %>').val();
            //cek txtEmail apakah sudah ada di database
            $('#txtEmail').blur(function () {
                var email = $('#txtEmail').val();

                var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Loaddata/validasiemail.ashx?email=' + email + '") %>';
                if (email != "") {
                    if (id == 0 || Emailuser != $('#txtEmail').val()) {
                        jQuery.ajax({
                            type: 'POST',
                            url: handlerUrl,
                            contentType: 'application/json',
                            dataType: 'json',
                            success: function (data) {
                                if (data.Sector > 0) {
                                    alert("email sudah ada !!");
                                    $('#txtEmail').val('');
                                    $('#txtEmail').focus();
                                }
                            },
                            error: function () {
                                alert('Error!');
                            }
                        });
                    }
                }

            });

            // 2. Initiate the validator
            var validator = new jQueryValidatorWrapper("form1", rules, messages);

            // 3. Set the click event to do the validation
            $("#btnSave").click(function () {

                if (!validator.validate())
                    return;

                var password = $("#txtPassword").val();

                var confirmpassword = $("#txtConfirmPassword").val();
                if(password!=confirmpassword)
                {
                             alert("Konfirmasi Password harus sama dengan password !")
                             return;
                }

                var status = $('#<%= hfStatus.ClientID %>').val();
                //  alert(status);
                var objUser = new Object();
                objUser.UserID = id;
                objUser.UserName = encodeURIComponent($('#txtUserName').val());
                objUser.UserCode = encodeURIComponent($('#txtUserCode').val());
                objUser.Email = encodeURIComponent($('#txtEmail').val());
                objUser.Mobile = encodeURIComponent($('#txtMobile').val());
                var ddldebtor = $("#ddlDebtor option:selected").val();
                var save = true;
                if (typeof ($("#ddlDebtor option:selected").val()) != 'undefined') {
                    objUser.DebtorID = encodeURIComponent(ddldebtor);
                    if (objUser.DebtorID.toString() == "" && status == -1) {

                        alert("Debitur harus di pilih!");
                        save = false;
                    }
                }
                else {
                    objUser.DebtorID = '';
                }
                if (typeof ($('#txtPassword').val()) != 'undefined')
                    objUser.Password = encodeURIComponent($.sha1($('#txtPassword').val()));
                var IsActive = "0";
                var checkIsActive = document.getElementById("chkIsActive");
                if (checkIsActive.checked) {
                    IsActive = "1";
                }
                else {
                    IsActive = "0";
                }
                objUser.IsActive = encodeURIComponent(IsActive);

                jsonData = JSON.stringify(objUser);




                if (save == true) {
                    if (id == 0) {

                        jQuery.ajax({

                            type: 'POST',
                            url: '<%= ResolveUrl("~/ajaxhandler/administration/usermanagement/sUserhandler.ashx?method=cekusercode&code=' + objUser.UserCode + '") %>',
                            contentType: 'application/json',
                            dataType: 'json',
                            success: function (data) {
                                if (data.Sector == "True") {
                                    alert("Data dengan kode user " + objUser.UserCode + " sudah ada! ");
                                    $('#UserCode').val('');
                                    $('#UserCode').focus();

                                }
                                else {
                                    CallAjax('<%= ResolveUrl("~/ajaxhandler/administration/usermanagement/sUserhandler.ashx") %>', '?method=insert', jsonData);
                                    parent.$('#dialog').dialog('close');

                                    setTimeout("parent.$('#table').trigger('reloadGrid');", 3000);

                                    return false;
                                }
                            },
                            error: function () {
                                alert('Error!');
                            }
                        });


                    }
                    else {

                        CallAjax('<%= ResolveUrl("~/ajaxhandler/administration/usermanagement/sUserhandler.ashx") %>', '?method=update', jsonData);
                        parent.$('#dialog').dialog('close');

                        setTimeout("parent.$('#table').trigger('reloadGrid');", 3000);

                        return false;
                    }

                }


            });

        });

    </script>
    <script type="text/javascript">

        function ClearText() {

            $('#txtUserName').val('');
            $('#txtUserCode').val('');
            $('#txtEmail').val('');
            $('#txtMobile').val('');
            $('#txtPassword').val('');
            $('#txtConfirmPassword').val('');


        }

        $('#btnClose').click(function () {
            parent.$('#dialog').dialog('close');
        });
         
    </script>
    <script type="text/javascript">

        //Match 6 to 10 character string with at least one upper case letter, one lower case letter, and one digit (useful for passwords).
        var passwordStrengthRegex = /((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,10})/gm;
        var HasError = false;

        $(function () {
            var txtPassword = $("#txtPassword");

            txtPassword.blur(function () {
                if (txtPassword.val() != "") {
                    var match = String($(this).val()).match(passwordStrengthRegex);
                    if (!match) {
                        $("#txtPassword").focus();
                        $("#txtPassword").val('');
                        $("#txtPassword").css({ 'background-color': 'red' });
                        //                    alert("Password must 6 to 15 character string with at least one upper case letter, one lower case letter, and one digit");
                        $("#msgErrorChangePassword").show();
                        $("#msgErrorChangePassword").html("Password harus 6 sampai 10 karakter \n dengan setidaknya satu huruf besar, satu huruf kecil, dan satu digit angka.");
                        HasError = true;
                    }
                    else {
                        $("#txtPassword").css({ 'background-color': '' });
                        HasError = false;
                        $("#msgErrorChangePassword").html("");
                        $("#msgErrorChangePassword").hide();
                    }
                }
            });
        });
    </script>

     <script type="text/javascript">

         //Match 6 to 10 character string with at least one upper case letter, one lower case letter, and one digit (useful for passwords).
         var passwordStrengthRegex = /((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,10})/gm;
         var HasError = false;

         $(function () {
             var txtConfirmPassword = $("#txtConfirmPassword");

             txtConfirmPassword.blur(function () {
                 if (txtConfirmPassword.val() != "") {
                     var match = String($(this).val()).match(passwordStrengthRegex);
                     if (!match) {
                         $("#txtConfirmPassword").focus();
                         $("#txtConfirmPassword").val('');
                         $("#txtConfirmPassword").css({ 'background-color': 'red' });
                         //                    alert("Password must 6 to 15 character string with at least one upper case letter, one lower case letter, and one digit");
                         $("#msgErrorChangePassword").show();
                         $("#msgErrorChangePassword").html("Confirm Password harus 6 sampai 10 karakter \n dengan setidaknya satu huruf besar, satu huruf kecil, dan satu digit angka.");
                         HasError = true;
                     }
                     else {
                         $("#txtConfirmPassword").css({ 'background-color': '' });
                         HasError = false;
                         $("#msgErrorChangePassword").html("");
                         $("#msgErrorChangePassword").hide();
                     }
                 }
             });
         });
    </script>
</head>
<body onload="ClearText();">
    <form id="form1" runat="server">
    <table border="0">
        <tr>
            <td style="width: 50">
                Kode User
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="txtUserCode" MaxLength="20" runat="server" Width="300"></asp:TextBox>&nbsp;<span
                    style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td style="width: 50">
                Nama User
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="txtUserName" MaxLength="100" runat="server" Width="300"></asp:TextBox>&nbsp;<span
                    style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td style="width: 50">
                Email
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="txtEmail" MaxLength="50" runat="server" Width="300"></asp:TextBox>&nbsp;<span
                    style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td style="width: 50">
                HP
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="txtMobile" runat="server" Width="300"></asp:TextBox>
            </td>
        </tr>
        <tr id="trPassword" runat="server">
            <td style="width: 50">
                Password
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="txtPassword" MaxLength="10" runat="server" TextMode="Password" Width="300"></asp:TextBox>&nbsp;<span
                    style="color: Red;">*</span>
            </td>
        </tr>
        <tr id="trConfirmPassword" runat="server">
            <td style="width: 50">
                Konfirmasi Password
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="txtConfirmPassword" MaxLength="10" runat="server" TextMode="Password" Width="300"></asp:TextBox>&nbsp;<span
                    style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td style="width: 50">
                Aktif
            </td>
            <td>
                :
            </td>
            <td>
                <asp:CheckBox ID="chkIsActive" runat="server" />
            </td>
        </tr>
        <tr runat="server" id="tr1" visible="true">
            <td style="width: 50">
                Debitur
            </td>
            <td>
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlDebtor" Width="300" runat="server" />
                <span style="color: Red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; *</span>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div id="msgErrorChangePassword" style="color: Red; font: 11px Arial,Helvetica,sans-serif;
                    height: 19px; width: 300px;">
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
            <td>
                <div style="text-align: right; padding-top: 10px;">
                    <button id="btnSave" type="button">
                        Save</button>
                    <button id="btnClose" type="button">
                        Close</button>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
            <td>
                <asp:HiddenField ID="hfID" runat="server" />
                <asp:HiddenField ID="hfStatus" runat="server" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
